<template>
  <div class="article-list" ref="ArticleList" @scroll="rememberScroll">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad()"
        finished-text="没有更多了"
      >
        <article-item v-for="(item, i) in articles" :key="i" :article="item" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from './article-item.vue'
import { getArticlesByChannel } from '@/api/article'
export default {
  name: 'ArticleList',
  props: {
    // 接收父组件传过来的id
    channelId: {
      type: Number,
      default: 0
    }
  },
  components: {
    ArticleItem
  },
  data () {
    return {
      // 正在加载
      loading: false,
      // 数据全部加载完毕
      finished: false,
      // 正在刷新
      refreshing: false,
      // 文章列表
      articles: [],
      // 时间戳
      timestamp: Date.now(),
      // 阅读位置 (data中申明)
      scrollTop: 0
    }
  },
  methods: {
    // 上拉加载
    async onLoad () {
      // 上拉加载
      // 1. 获取数据
      const [err, res] = await getArticlesByChannel(
        this.channelId,
        this.timestamp
      )
      // console.log(res)
      // 2. 判断下一页是否还有数据：当前时间戳未空，也就是没有更多了
      if (err) return this.$toast.fail('加载失败') // 加载失败
      if (res.data.data.pre_timestamp) {
        // 2.1 如果有：记录当前的数据时间戳，下一次请求使用
        this.timestamp = res.data.data.pre_timestamp
      } else {
        // 2.2 如没有：设置没有更多数据
        this.finished = true
      }
      // 3. 当前列表追加数据
      this.articles.push(...res.data.data.results)
      // 4. 结束上拉加载操作
      this.loading = false
    },
    // 下拉加载事件
    async onRefresh () {
      // 重新获取数据
      this.timestamp = Date.now()
      // 发送请求
      const [, res] = await getArticlesByChannel(this.channelId, this.timestamp)
      console.log(res)
      // 重置全部数据加载完成：可以再次加载更多
      this.finished = false
      // 替换当前列表数据戳
      this.articles = res.data.data.results
      // 记录下一次请求的时间
      this.timestamp = res.data.data.pre_timestamp
      // 结束加刷新操作
      this.refreshing = false
    },
    // 滚动事件
    rememberScroll () {
      // 记录滚动的距离
      this.scrollTop = this.$refs.ArticleList.scrollTop
    }
  },
  // 组件被激活时
  activated () {
    // 滚动到记录的位置
    this.$refs.ArticleList.scrollTop = this.scrollTop
  }
}
</script>

<style scoped lang="less">
.article-list {
  height: 100%;
  overflow-y: auto;
  padding: 0 16px;
}
</style>
